<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Demo</title>
	<script type="text/javascript" src="__PUBLIC__/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/easyui/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/easyui/themes/icon.css">
	<script type="text/javascript" src="__PUBLIC__/js/add-tab.js"></script>

	<style type="text/css">
        .rolePanel {
            float:left;
            width:500px;
            height:auto;
            margin:10px 0 0 100px;
        }
    </style>
	<script type="text/javascript">
	$(function(){

		$('#role').tree({
			url:'__URL__/dptData'
		})

		$('#add_department').click(function(){
			$('#add_dlg').dialog('open').dialog('setTitle','添加部门');
		})

		$('#afrms').form({
			url:'__APP__/Department/addDepartment',
		    onSubmit:function(){
		        return $(this).form('validate');
		    },
		    success:function(data){
		    	if(data=='ok'){
		    		$.messager.alert('提醒', '添加成功!', 'info');
		    		location.href='__APP__/Department/dptList';
		    		//$('#frms').datagrid('reload');
                	//$('#edit_dlg').dialog('close');
		    	}
		    	if(data=='no'){
		    		$.messager.alert('提醒','添加失败!','info');
		    	}
		    }
		});

		$('#edit_department').click(function(){
			var node = $('#role').tree('getSelected');
        	if (node) {
    			$.ajax({
    				url:'__APP__/Department/findSuperiorDpt',
    				type:'post',
    				data:{id:node.id},
    				success:function(data){
    					var obj=eval("("+data+")");
    					$('#edit_dpt_parentid').append(obj['option']);
    				}
    			});

				$('#edit_dlg').dialog('open').dialog('setTitle','修改部门');
				$('#edit_dpt_name').val(node.text);
				$('#edit_dpt_id').val(node.id);
			}
			else{
				$.messager.alert('错误提示','请选择一个部门');
			}
		})

		$('#efrms').form({
			url:'__APP__/Department/editDepartment',
		    onSubmit:function(){
		        return $(this).form('validate');
		    },
		    success:function(data){
		    	if(data=='ok'){
		    		$.messager.alert('提醒', '修改成功!', 'info');
		    		location.href='__APP__/Department/dptList';
		    		//$('#frms').datagrid('reload');
                	//$('#edit_dlg').dialog('close');
		    	}
		    	if(data=='no'){
		    		$.messager.alert('提醒','修改失败!','info');
		    	}
		    }
		});

		$('#delete_department').click(function(){
			var node = $('#role').tree('getSelected');
        	if (node) {
        		$.messager.confirm('安全提示','您确认要删除该部门及其下属部门吗？',function(data){
        			if(data){
		    			$.ajax({
		    				url:'__APP__/Department/deleteDpt',
		    				type:'post',
		    				data:{id:node.id},
		    				success:function(data){
		    					$.messager.alert('提示','删除成功');
		    					location.href='__APP__/Department/dptList';
		    					//$('#role').tree('reload');
		    				}
		    			});
		    		}
    			});
			}
			else{
				$.messager.alert('错误提示','请选择一个部门');
			}
		})


	})

	</script>

</head>
<body>
<div class="rolePanel">
    <div style="float:left;height:80px; width:80px;">
        <a href="#" class="easyui-linkbutton" id="add_department" iconCls="icon-add"  plain ="true">添加部门</a>
        <a href="#" class="easyui-linkbutton" id="edit_department" iconCls="icon-edit"  plain ="true">编辑部门</a>
        <a href="#" class="easyui-linkbutton" id="delete_department" iconCls="icon-remove" plain ="true">删除部门</a>
    </div>
    <div class="easyui-panel" title="部门结构">
        <ul id="role" style="min-height:200px;">

        </ul>
    </div>

    <div id="add_dlg" class="easyui-dialog" style="width:280px;height:160px;"
            iconCls ="icon-mem-level"
			closed="true">
            <form  method="post" id="afrms" >
                <table cellspacing="0" cellpadding="2" class='ftable'>
                    <tr style="line-height:45px;height: 45px">
                        <td width="100" align="right">部门名称：</td>
                        <td width="100">
                        	<input class="easyui-validatebox" name="add_dpt_name" type="text" data-options="validType:['length[1,20]'],required:true"/>
                        </td>
                    </tr>

                    <tr style="line-height:25px; height: 25px">
                        <td width="100" align="right">上级部门：</td>
                        <td width="100">
                       		<select id="add_dpt_parentid" name="add_dpt_parentid">
                       			<option value="">--请选择部门--</option>
                                {$json}
                            </select>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="2" align='center'>
                            <input type="submit" value="保存"/>
                            <input type="button" onClick="javascript:$('#add_dlg').dialog('close')" value="取消" />
                            
                        </td>
                    </tr>
                </table>
            </form>
    </div>

    <div id="edit_dlg" class="easyui-dialog" style="width:280px;height:160px;"
            iconCls ="icon-mem-level"
			closed="true">
            <form  method="post" id="efrms" >
                <table cellspacing="0" cellpadding="2" class='ftable'>
                	<input type="hidden" name="edit_dpt_id" id="edit_dpt_id"/>
                    <tr style="line-height:45px;height: 45px">
                        <td width="100" align="right">部门名称：</td>
                        <td width="100">
                        	<input class="easyui-validatebox" id="edit_dpt_name" name="edit_dpt_name" type="text" data-options="validType:['length[1,20]'],required:true"/>
                        </td>
                    </tr>

                    <tr style="line-height:25px; height: 25px">
                        <td width="100" align="right">上级部门：</td>
                        <td width="100">
                       		<select id="edit_dpt_parentid" name="edit_dpt_parentid">
                       			<option value="">--请选择部门--</option>
                                {$json}
                            </select>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="2" align='center'>
                            <input type="submit" value="保存"/>
                            <input type="button" onClick="javascript:$('#edit_dlg').dialog('close')" value="取消" />
                            
                        </td>
                    </tr>
                </table>
            </form>
    </div>
</div>

</body>
</html>